<template>
    <footer>
        <div class="middle-footer">
            <div class="wrapper">
                <ul class="enter">
                    <li class="unit" v-for="(item, index) in footerData" key="index">
                        <a :href="item.url" class="footer-logo" :class="item.className" target="_blank"></a>
                        <span class="title">{{item.name}}</span>
                    </li>
                </ul>
                <div class="copy">
                    <p class="link">
                        <template v-for="(item, index) in footerContract" key="index" >
                            <a :href="item.url" target="_blank" class="item s-fc3">{{ item.name }}</a>
                            <span v-if="index < footerContract.length - 1" class="line">|</span>
                        </template>
                    </p>
                    <p class="right s-fc3">
                        <a href="https://jubao.163.com" class="s-fc3 sep" target="_blank">廉政举报</a>
                        <span class="sep span">不良信息举报邮箱: 51jubao@service.netease.com</span>
                        <span>客服热线：95163298</span>

                    </p>
                    <p class="right s-fc3">
                        <span>互联网宗教信息服务许可证：浙（2022）0000120</span>
                        <span>增值电信业务经营许可证：浙B2-20150198</span>
                        <a href="https://beian.miit.gov.cn/#/Integrated/index" rel="noopener noreferer" target="_blank"
                            class="s-fc3">
                            粤B2-20090191-18&nbsp;&nbsp;浙ICP备15006616号-4&nbsp;&nbsp;工业和信息化部备案管理系统网站
                        </a>
                    </p>
                    <p class="right s-fc3">
                        <span class="sep span">网易公司版权所有©1997-2025</span>
                        <span class="span">杭州乐读科技有限公司运营：</span>
                        <a href="#" target="_blank" class="s-fc3">浙网文[2024] 0900-042号</a>
                        <a href="#" rel="noopener noreferrer" target="_blank" class="s-fc3 police-link">
                            <span class="police-logo"></span>
                            <span class="police-text">浙公网安备 33010802013307号</span>
                        </a>
                        <a href="#" rel="noopener noreferrer"
                            target="_blank" class="s-fc3 police-link">
                            <span class="police-text">算法服务公示信息</span>
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</template>
<script setup>
    import footerData from '../json_data/footer_data.json'
    import footerContract from '../json_data/footer_contract.json'
</script>
<style lang="scss" scoped>
footer{
    position: relative;
    height: 325px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
    .wrapper{
        width: 980px;
        margin: 0 auto;

        .enter{
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 33px;
            .unit:first-child{
                margin-left: 0;
            }
            .unit{
                width: 45px;
                margin-left: 80px;
                text-align: center;
                color: #666;

                .footer-logo{
                    display: block;
                    float: none;
                    width: 45px;
                    height: 45px;
                    margin: 0 auto;
                    &.logo-openplatform{
                        background-position: -170px -5px;
                        &:hover{
                            background-position: -5px -115px;
                        }
                    }
                    &.logo-trade{
                        background-position: -5px -170px;
                        &:hover{
                            background-position: -60px -170px;
                        }
                    }
                    &.logo-xstudio{
                        background: url(../assets/footer_img/xStudio.png);
                        background-size: 45px;
                        &:hover{
                            background: url(../assets/footer_img/xStudioHover.png);
                            background-size: 45px;
                        }
                    }

                    &.logo-auth{
                        background-position: -60px -60px;
                        &:hover{
                            background-position: -115px -5px;
                        }
                    }

                    &.logo-musician{
                        background: url(../assets/footer_img/aiLogo.png);
                        background-size: 45px;
                        &:hover{
                            background: url(../assets/footer_img/aiLogoHover.png);
                            background-size: 45px;
                        }
                    }

                    &.logo-cloudsong{
                        background: url(../assets/footer_img/cloudSong.png);
                        background-size: 45px;
                        &:hover{
                            background: url(../assets/footer_img/cloudSongHover.png);
                            background-size: 45px;
                        }
                    }

                    &.logo-reward{
                        background-position: -170px -115px;
                        &:hover{
                            background-position: -60px -115px;
                        }
                    }

                }

                .title{
                    display: inline-block;
                    width: 100px;
                    margin-top: 10px;
                    margin-left: -27.5px;
                    font-weight: 400;
                    font-size: 12px;
                    text-align: center;
                    color:rgba(0, 0, 0, 0.5);
                }
            }
        }

        .copy{
            padding-top: 60px;
            line-height: 24px;
            margin: 0 auto;
            text-align: center;
            .line{
                margin: 0 8px 0 8px;
                color: #d9d9d9;
            }

            .sep{
                margin-right: 14px;
            }

            .police-link{
                margin-left: 5px;
                font-size: 0;
            }

            .police-logo{
                width: 14px;
                height: 14px;
                background: url(../assets/footer_img/police.png) no-repeat;
                background-size: cover;
                display: inline-block;
                margin-right: 2px;
                vertical-align: -2px;
            }

            .police-text{
                font-size: 12px;
            }
        }

    }
}
</style>